<template>
  <div class="app-container">
    <div class="table-page-search-wrapper">
      <el-form :inline="true" label-width="100px">
        <el-row :gutter="18">
          <el-col :md="6" :sm="24">
            <el-form-item label="仓库名称:">
              <el-select v-model="warehouseId" placeholder="请选择选择仓库" @change="onSearch">
                <el-option
                  v-for="item in more.warehouseOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="6" :sm="24">
            <el-button v-permission="['create']" type="primary" @click="$refs.form.open(undefined)">
              新建货区
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 不要删否则样式会改变 -->
    <div class="table-operator" />
    <el-tabs @tab-click="tabClick">
      <el-tab-pane v-for="item in locationData" :key="item.id">
        <span slot="label">
          货区编号{{ item.areaName }}
          <i class="el-icon-edit" @click="$refs.form.open(item.id)" />
        </span>
        <div class="header-bar">
          <el-button type="primary" @click="$refs.shelfForm.open()">新增货架</el-button>
          <!-- 提示区 -->
          <span class="categoryTips">
            <div v-for="itemColor in categoryList" :key="itemColor.color" class="categoryTipsItme">
              <div class="categoryTipsItmeColor" :style="{ backgroundColor: itemColor.color }" />
              {{ itemColor.name }}
            </div>
          </span>
        </div>
        <!-- 货架展示区 -->
        <el-row v-if="locationData.length > 0" :gutter="24" style="margin-top: 18px;">
          <el-col v-for="shelfItem in warehouseAreaData" :key="shelfItem.id" :md="4">
            <div class="shelf-box">
              <div class="shelf-header">
                <div class="shelf-header-left">
                  编号{{ shelfItem.slelfNumber }}<i class="el-icon-edit" @click="$refs.shelfForm.open(shelfItem.id)" />
                </div>
                <div class="shelf-header-right">
                  <el-popconfirm title="确定删除该货架吗？" @confirm="delShelf(shelfItem.id)">
                    <i slot="reference" class="el-icon-close" />
                  </el-popconfirm>
                </div>
              </div>
              <div
                class="shelf-info"
                @click="
                  $router.push({
                    name: 'shelfList',
                    query: {
                      id: shelfItem.id,
                      warehouseName: locationData[0].warehouseWarehouseName,
                      warehouseAreaNumber: shelfItem.warehouseAreaAreaName,
                      ShelfNumber: shelfItem.slelfNumber
                    }
                  })
                "
              >
                <div>
                  <div class="num-box">{{ shelfItem.col }}</div>
                  <span class="tip-box">货架行数</span>
                </div>
                <el-divider direction="vertical" />
                <div>
                  <div class="num-box">{{ shelfItem.line }}</div>
                  <span class="tip-box">货架列数</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <diboot-form ref="form" :warehouse-id="warehouseId" @complete="getList" />
    <shelf-form ref="shelfForm" :form-data="formData" @complete="getShelfList(warehouseAreaId)" />
  </div>
</template>

<script>
import list from '@/components/diboot/mixins/list'
import dibootForm from './form'
import shelfForm from './shelfForm.vue'
import { dibootApi } from '@/utils/request'
export default {
  name: 'StorageLocationList',
  components: {
    dibootForm,
    shelfForm
  },
  mixins: [list],
  data() {
    return {
      baseApi: '/warehouse/area',
      getListFromMixin: false,
      attachMoreList: [
        {
          target: 'Warehouse',
          label: 'warehouseName',
          value: 'id'
        }
      ],
      categoryList: [
        { name: '空闲', color: '#22AC38' },
        { name: '满仓', color: '#EC3838' },
        { name: '空仓', color: '#2465FF' },
        { name: '禁用', color: '#D2D2D2' }
      ],
      warehouseId: '',
      warehouseName: '',
      warehouseAreaId: '',
      warehouseAreaCode: '',
      warehouseAreaData: [],
      locationData: []
    }
  },
  computed: {
    formData() {
      return {
        warehouseAreaId: this.warehouseAreaId,
        warehouseName: this.warehouseName,
        warehouseAreaCode: this.warehouseAreaCode
      }
    }
  },
  async created() {
    await this.attachMore()
    this.$set(this.queryParam, 'warehouseId', this.more.warehouseOptions[0].value)
    this.warehouseId = this.queryParam.warehouseId
    this.getList()
  },
  methods: {
    delShelf(id) {
      dibootApi
        .delete(`/warehouse/shelves/${id}`)
        .then(result => {
          this.$message({
            showClose: true,
            message: result.msg,
            type: 'success'
          })
          this.getShelfList(this.warehouseAreaId)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取货架数据
    getShelfList(warehouseAreaId) {
      dibootApi
        .get('/warehouse/shelves/list', {
          warehouseAreaId,
          pageIndex: 1,
          pageSize: 99999
        })
        .then(result => {
          this.warehouseAreaData = result.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    tabClick(panelInfo) {
      this.warehouseAreaId = this.locationData[panelInfo.index].id
      this.warehouseAreaCode = this.locationData[panelInfo.index].areaNumber
      this.getShelfList(this.warehouseAreaId)
    },
    // 获取货区数据
    getList() {
      dibootApi
        .get('/warehouse/area/list', {
          warehouseId: this.warehouseId,
          pageIndex: 1,
          pageSize: 99999
        })
        .then(result => {
          this.locationData = result.data
          if (result.data.length > 0) {
            this.warehouseAreaId = result.data[0].id
            this.warehouseAreaCode = result.data[0].areaNumber
            this.warehouseName = result.data[0].warehouseWarehouseName
            this.getShelfList(this.warehouseAreaId)
          } else {
            this.warehouseAreaData = []
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.shelf-box {
  border: 1px solid #b8c9f3;
  border-radius: 4px;
  &:hover {
    border: 1px solid #3f74f8;
  }
  .shelf-header {
    height: 29px;
    box-sizing: border-box;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #dde3f5;
    .shelf-header-left {
      color: #2562fb;
    }
  }
  .shelf-info {
    height: 90px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .num-box {
      font-size: 28px;
      text-align: center;
      color: #2562fb;
    }
    .tip-box {
      font-size: 12px;
    }
  }
}
.header-bar {
  display: flex;
}
.categoryTips {
  display: flex;
  .categoryTipsItme {
    display: flex;
    align-items: center;
    .categoryTipsItmeColor {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      margin: 0 5px;
    }
  }
}
</style>
